<template>
<div>
  <div class="address-box">
    <div class="address-box-item">
        <div class="username">
            <span>联系人</span>
            <input type="text" :class="'username.length' !== '0'? 'inputed':'input'"  v-model="addressInfo.name">
        </div>
        <div class="mobile">
            <span>电话</span>
            <input type="text" :class="'username.length' !== '0'? 'inputed':'input'" v-model="addressInfo.mobile">
        </div>
        <div class="address">
            <span>地址</span>
            <input type="text" :class="'username.length' !== '0'? 'inputed':'input'" v-model="addressInfo.address">
        </div>
        <div class="houseNumber">
            <span>门牌号</span>
            <input type="text" :class="'username.length' !== '0'? 'inputed':'input'" v-model="addressInfo.homeNum">
        </div>
        <div class="sureAddress">
          <input id="food_c" type="checkbox" :checked="isChecked" name="food" @change="handleInput">
          <span>设为默认收获地址</span>
        </div>
        <van-button type="primary" block class="saveAddress" @click="saveAddress()">保存地址</van-button>
        <van-button type="danger" block class="deleteAddress" v-if="username.length !== 0" @click="deleteSingeAddress()">删除地址</van-button>
    </div>
  </div>
</div>
</template>

<script>
import { saveAddress, deleteAddress } from '@/api/address.js'
import { mapState } from 'vuex'
export default {
  name: 'operationAddressIndex',
  components: {},
  props: {
    username: {
      type: String,
      default: ''
    },
    mobile: {
      type: String,
      default: ''
    },
    addressItem: {
      type: String,
      default: ''
    },
    doorNumber: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      addressInfo: {},
      isChecked: true
    }
  },
  computed: {
    ...mapState('m_my', ['AddressIndex'])
  },
  watch: {},
  created () {
    // 传送信息
    this.deliveryAddress()
  },
  mounted () {

  },
  methods: {
    // 传送地址信息
    deliveryAddress () {
      this.addressInfo = {
        // id: 8,
        // consignee: {
        name: this.username,
        mobile: this.mobile,
        address: this.addressItem,
        homeNum: this.doorNumber,
        gender: 0,
        defaultAddress: Boolean
        // }
      }
    },
    // 保存地址
    async saveAddress () {
      this.addressInfo.defaultAddress = this.isChecked
      this.$toast.loading({
        message: '保存中...',
        forbidClick: true,
        duration: 2000
      })
      // console.log(this.addressInfo)
      try {
        const res = await saveAddress({
          consignee: [this.addressInfo]
        })
        if (res.status !== 201) {
          return this.$toast.fail('新增失败！')
        }
        this.$toast.success('保存成功！')
        deleteAddress(this.AddressIndex)
        this.$router.push('/myAddress')
      } catch (error) {
        this.$toast.fail('保存失败')
      }
    },
    // 监听是否选择默认地址
    handleInput () {
      this.isChecked = !this.isChecked
      // console.log(this.isChecked)
    },
    // 删除地址
    deleteSingeAddress () {
      console.log(this.AddressIndex)
      this.$dialog.confirm({
        title: '删除',
        message: '确认要删除此地址？'
      })
        .then(() => {
          deleteAddress(this.AddressIndex)
          this.$router.back(-1)
          this.$toast('删除地址成功！')
        })
        .catch(() => {
          // on cancel
          this.$toast('已取消删除')
        })
    }
  }
}
</script>

<style scoped lang="less">
.address-box {
    width: 100%;
    height: 100%;
    font-size: 36px;
    }
    .address-box-item{
      position: relative;
      margin-left: 10%;
       .username {
         margin-top: 50px;
         span {
           width: 15%;
           margin-right: 10px;
         }
         .input {
           width: 65%;
         }
       }
       .mobile {
         margin-top: 25px;
         span {
           width: 15%;
           margin-right: 43px;
         }
         .input {
           width: 65%;
         }
       }
       .address {
         margin-top: 25px;
         span {
           width: 15%;
           margin-right: 43px;
         }
         .input {
           width: 65%;
         }
       }
       .houseNumber {
         margin-top: 25px;
         span {
           width: 15%;
           margin-right: 10px;
         }
         .input {
           width: 65%;
         }
       }
       .sureAddress {
           font-size: 30px;
           position: absolute;
           bottom: -78px;
           left: 155px;
       }
       .saveAddress {
           width: 80%;
           height: 90px;
           position: absolute;
           bottom: -200px;
           left: 20px;
           background-color: #169bd5;
       }
       .deleteAddress {
         width: 80%;
         height: 90px;
         position: absolute;
         bottom: -310px;
         left: 20px;
       }
    }

.input {
  border: 0;
  border-bottom: 1px solid #02b6fd;
  padding-left: 30px;
  color: #ccc;
  font-size: 32px;
}
.inputed {
  border: 0;
  border-bottom: 1px solid #02b6fd;
  padding-left: 30px;
  color: #f00000;
  font-size: 32px;
}
</style>
